﻿<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	font-family: "微软雅黑";
}

li {
	list-style: none;
}

#head {
	background-color: rgb(250, 250, 250);
}

#nav {
	width: 1200px;
	margin: 0 auto;
	/* border:1px solid red; */
	overflow: hidden;
	padding: 5px 0;
}

#nav a {
	display: inline-block;
	text-align: center;
	height: 20px;
	line-height: 20px;
}

#nav div {
	display: inline-block;
}

#shouye {
	height: 18px;
	width: 18px;
	background: url(img/mlsjl.png) no-repeat;
	margin-bottom: -3px;
}

#weixin {
	height: 18px;
	width: 25px;
	background: url(img/mlsjl.png) no-repeat -22px;
	margin-bottom: -3px;
}

#shoucang {
	height: 18px;
	width: 18px;
	background: url(img/mlsjl.png) no-repeat -76px;
	margin-bottom: -3px;
}

#gouwuche {
	height: 18px;
	width: 20px;
	background: url(img/mlsjl.png) no-repeat -101px;
	margin-bottom: -3px;
}

#dingdan {
	height: 18px;
	width: 16px;
	background: url(img/mlsjl.png) no-repeat -130px;
	margin-bottom: -3px;
}

#xiala {
	height: 18px;
	width: 16px;
	background: url(img/mlsjl.png) no-repeat -175px;
	margin-bottom: -3px;
}

#head a {
	font-size: 15px;
	color: rgb(102, 102, 102);
}

#head .nav_zl {
	float: left;
	padding: 0 20px;
	border-right: 1px dotted gray;
}

#head #nav_select {
	float: right;
}

.tabmeun {
	width: 70px;
	text-align: center;
	background-color: rgb(250, 250, 250);
	position: absolute;
}

.submeun ul {
	display: none;
}

#nav ul li:hover .tabmeun {
	display: block;
}

#middle {
	width: 1200px;
	margin: 0 auto;
	/* border:1px solid red; */
}

#kefu {
	height: 70px;
	width: 510px;
	border-right: 1px dotted #666;
	float: left;
}

#kftouxiang {
	height: 40px;
	width: 40px;
	border-radius: 500px;
	margin-top: 15px;
	margin-left: 10px;
	float: left;
}

#kefuming {
	display: inline-block;
}

#kefum, #pingjia {
	float: left;
}

#kefum {
	margin-top: 15px;
	margin-left: 10px;
	font-size: 15px;
	color: black;
}

#kefuming {
	color: black;
}

#pingjia {
	margin-top: 35px;
	margin-left: -45px;
	font-size: 12px;
}

.pjzi {
	color: #666;
}

.pjfen {
	color: #ef2f23;
	margin-right: 5px;
}

#kfscjiahao {
	height: 11px;
	width: 11px;
	background: url(img/xiangqingjingling.png) no-repeat -5px -53px;
	display: inline-block;
	margin-top: 4px;
	margin-right: 3px;
}

#sck {
	height: 20px;
	width: 55px;
	float: left;
	margin-top: 25px;
	margin-left: 15px;
	text-align: center;
	font-size: 13px;
	border: 1px solid #ddd;
}

#lxk {
	height: 20px;
	width: 80px;
	float: left;
	margin-top: 25px;
	margin-left: 15px;
	text-align: center;
	font-size: 13px;
	border: 1px solid #ddd;
}

#kfxiala {
	height: 39px;
	width: 15px;
	background: url(img/kefuxiangqing.png) no-repeat;
	margin-top: -10px;
	margin-left: 90px;
}

#ssk {
	height: 30px;
	width: 400px;
	margin-top: 20px;
	margin-left: 130px;
	padding-left: 5px;
	border: 2px solid #ef2f23;
}

#quanzhan {
	height: 34px;
	width: 70px;
	color: #fff;
	background-color: #ef2f23;
	border: 2px solid #ef2f23;
}

#bendian {
	height: 34px;
	width: 70px;
	background-color: #fff;
	border: 1px solid #ef2f23;
}

#xxerji {
	margin-top: 73px;
	padding-bottom: 15px;
	width: 510px;
	background-color: rgb(240, 240, 240);
	display: none;
	position: absolute;
	top: 30px;
	left: 352px;
}

#li1 {
	width: 220px;
	margin: 3px;
	border-right: 1px solid #999;
}

#li1 li {
	font-size: 12px;
}

.lia {
	line-height: 25px;
	color: #666;
	text-align: right;
}

#li2 {
	float: right;
	margin-right: 60px;
}

#li2 li {
	font-size: 13px;
	line-height: 25px;
}

#li3 {
	float: right;
	margin-right: 35px;
}

#li3 li {
	font-size: 13px;
	line-height: 25px;
}

.num {
	color: #f36;
}

.up {
	background-color: #f36;
	color: #fff;
	padding: 2px;
	margin-right: 5px;
}

#erjidi {
	float: right;
	font-size: 12px;
	line-height: 25px;
	width: 250px;
	margin-top: 130px;
	margin-right: -230px;
	border-top: 1px dotted #666;
}

#li4 {
	float: left;
	margin-top: 10px;
	margin-left: 20px;
}

#li5 {
	margin-top: 10px;
	margin-left: 170px;
}

#kefu #kfxiala:hover #xxerji {
	display: block;
}

#kefu #kfxiala:hover #kefu {
	background-color: rgb(240, 240, 240);
}

#tbg {
	border-top: 1px solid #999;
	margin-top: 17px;
	padding-top: 20px;
	background: url("img/toubg.png") center no-repeat;
	height: 150px;
}

#m_nav {
	background-color: #333;
	height: 30px;
	margin-top: -30px;
}

#mnav1 {
	width: 1200px;
	margin: 0 auto;
}

.xqli {
	float: left;
}

#m_nav a {
	color: #fff;
	padding: 0 20px;
	margin-top: 3px;
	display: block;
	border-right: 1px solid #666;
}

#xqqb {
	color: #fff;
	padding: 0 20px;
	margin-top: 3px;
	display: block;
	border-right: 1px solid #666;
}

#xq_m_xl {
	height: 11px;
	width: 11px;
	background: url(img/xiangqingjingling.png) no-repeat -260px -28px;
	margin-top: -12px;
	margin-left: 75px;
}

#qbspxl {
	display: inline-block;
	margin-top: 6px;
	background-color: #333;
	width: 127px;
	display: none;
	position: absolute;
}

#qbspxl a {
	font-size: 12px;
	color: #fff;
	line-height: 30px;
}

#m_nav #qbxl:hover #qbspxl {
	display: inline-block;
}

#main {
	width: 1200px;
	height: 700px;
	margin: 50px auto;
}

#tpzs div {
	display: none;
}

#tpzs .imgzs {
	display: block;
}

#tpzs .imgzs img {
	height: 600px;
}

#mx {
	width: 400px;
	margin-top: 10px;
	text-align: center;
}

#mx img {
	margin-right: 10px;
	height: 100px;
}

#zhanshi {
	float: left;
}

#xqjieshao {
	/* border:1px solid red; */
	padding-left: 450px;
}

#xqjiage {
	background-image: url(img/jiagebg.png);
	margin-top: 25px;
}

.xqjg {
	font-size: 15px;
	color: #999;
}

#yuanjia {
	text-decoration: line-through;
}

#dbb {
	font-size: 25px;
	font-size: bold;
	color: red;
}

#jg {
	margin-right: 18px;
}

#pj {
	margin-left: 395px;
	font-size: 15px;
	color: #999;
}

#ljxl {
	margin-left: 10px;
	font-size: 15px;
	color: #999;
}

#jgkf {
	font-size: 12px;
	margin-top: 25px;
}

#jgkf span {
	color: #999;
	margin-right: 15px;
}

#xqys {
	font-size: 12px;
	margin-top: 25px;
}

#xqys span {
	color: #999;
	margin-right: 15px;
}

#xqcm {
	font-size: 12px;
	margin-top: 25px;
}

#xqcm span {
	color: #999;
	margin-right: 15px;
}

#xqcm li {
	float: left;
	font-size: 18px;
	padding: 0 10px;
	border: 1px dashed #333;
	margin-right: 10px;
	margin-top: -20px;
	cursor: pointer;
}

#cms {
	margin-left: 53px;
}

#xqcm .cmbxz {
	border: 1px solid #333;
}

#sljian {
	height: 25px;
	width: 25px;
	background: url(img/goumaijingling.png) no-repeat -585px -11px;
	border: 1px solid #999;
	display: inline-block;
	margin-top: 15px;
	margin-left: 12px;
}

#sljia {
	height: 25px;
	width: 25px;
	background: url(img/goumaijingling.png) no-repeat -585px 7px;
	border: 1px solid #999;
	display: inline-block;
}

#xqsl span {
	font-size: 12px;
	color: #999;
	margin-left: -185px;
}

#xqsl input {
	height: 25px;
	width: 45px;
	position: relative;
	top: -8px;
	text-align: center;
}

#ljgm {
	height: 50px;
	width: 200px;
	display: inline-block;
	background-color: #ef2f23;
	color: #fff;
	text-align: center;
	line-height: 50px;
	margin-top: 15px;
	margin-right: 15px;
	margin-left: 55px;
}

#jrgwc {
	height: 50px;
	width: 200px;
	display: inline-block;
	background-color: #fff;
	color: black;
	border: 1px solid black;
	text-align: center;
	line-height: 50px;
}

#xqx {
	height: 20px;
	width: 20px;
	background: url(img/goumaijingling.png) no-repeat -560px 5px;
	display: inline-block;
	position: relative;
	left: 7px;
	top: 3px;
	margin-right: 7px;
}

#xqsck {
	width: 70px;
	border: 1px solid #ddd;
	border-radius: 200px;
	margin-top: 20px;
	margin-left: 53px;
}

#xqsck:hover {
	border: 1px solid #ef2f23;
}

#xqsck span {
	position: relative;
	color: #aaa;
}

#xqf {
	height: 20px;
	width: 20px;
	background: url(img/goumaijingling.png) no-repeat -612px 5px;
	display: inline-block;
	position: relative;
	left: 7px;
	top: 4px;
	margin-right: 7px;
}

#xqfxk span {
	position: relative;
	font-size: 12px;
	color: #aaa;
}

#xqfxk {
	width: 70px;
	border: 1px solid #ddd;
	border-radius: 200px;
	margin-top: -26px;
	margin-left: 150px;
}

#fwcn {
	margin-top: 25px;
}

#fwcn span {
	font-size: 12px;
	color: #999;
	margin-right: 15px;
}

#fwcn img {
	height: 25px;
	position: relative;
	top: 7px;
	margin: 0 5px;
}

#fwcn #tui {
	margin-left: -15px;
}

#zffs {
	height: 20px;
	width: 108px;
	background: url(img/shoucangjingling.png) no-repeat -36px -295px;
}

#zffsk span {
	font-size: 12px;
	color: #999;
	margin-right: 15px;
}

#zffsk {
	margin-top: 15px;
}

#zffs {
	margin-top: -18px;
	margin-left: 60px;
}

#foot {
	height: 250px;
	border-top: #666;
	/* border:1px solid red; */
	background-color: rgb(250, 250, 250);
}

#foot table {
	width: 700px;
	height: 200px;
}

#foot tr {
	font-size: 12px;
	color: rgb(102, 102, 102);
}

#foot #title {
	font-size: 18px;
	font-weight: bold;
}

.guanzhu {
	display: inline-block;
}

#xinlang {
	height: 18px;
	width: 20px;
	background: url(img/guanzh.png) no-repeat;
	margin-bottom: -5px;
	margin-right: 3px;
}

#Qkongjian {
	height: 18px;
	width: 20px;
	background: url(img/guanzh.png) no-repeat -28px;
	margin-bottom: -5px;
	margin-right: 3px;
}

#tengxun {
	height: 18px;
	width: 20px;
	background: url(img/guanzh.png) no-repeat -56px;
	margin-bottom: -5px;
	margin-right: 3px;
}

#erweima {
	float: right;
	margin-right: 80px;
	margin-top: 20px;
	text-align: center;
}

#erweima1 {
	float: right;
	margin-right: 100px;
	margin-top: 20px;
	text-align: center;
}

#foot_ys {
	width: 1200px;
	margin: 0 auto;
	border-bottom: 1px solid rgb(102, 102, 102);
}

#footer {
	text-align: center;
	font-size: 12px;
	line-height: 20px;
	color: rgb(102, 102, 102);
}

#footer a {
	color: rgb(102, 102, 102);
}

#footer a:hover {
	color: #f36;
}

#imgzs1 a:hover #imgzs {
	background-image: url(img/1-2.jpg);
	height: 600px;
}
</style>
</head>
<body>
	<embed style="width: 100%;" type="text/html" src="header.html" />

	<div id="app">

		<div v-if="pro == null"> 对不起 暂无该商品 </div>

		<div v-else>
			<div id="middle">
				<div id="kefu">
					<img id="kftouxiang" src="img/kefutou.jpg" />
					<div id="kefum">
						<a id="kefuming" href="#">小晴儿</a>
					</div>
					<div id="pingjia">
						<span class="pjzi">描述</span> <span class="pjfen">4.7</span> <span
							class="pjzi">价格</span> <span class="pjfen">5.00</span> <span
							class="pjzi">质量</span> <span class="pjfen">4.75</span> <span
							class="pjzi">服务</span> <span class="pjfen">4.7</span>
					</div>
					<div id="sck">
						<a><div id="kfscjiahao"></div>收藏</a>
					</div>
					<div id="lxk">
						<a> <img src="img/lianxikefu.gif"
							style="height: 15px; width: 15px;" />联系客服
							<div id="kfxiala">
								<div id="xxerji">
									<ol id="li3">
										<li>比同行平均</li>
										<li><span class="up">高</span><span>1.77%</span></li>
										<li><span class="up">高</span><span>2.65%</span></li>
										<li><span class="up">高</span><span>0.00%</span></li>
										<li><span class="up">高</span><span>1.92%</span></li>
									</ol>
									<ol id="li2">
										<li>动态评分</li>
										<li>描述相符：<span class="num">4.77</span></li>
										<li>质量满意：<span class="num">4.65</span></li>
										<li>价格合理：<span class="num">5.00</span></li>
										<li>服务周到：<span class="num">4.92</span></li>
									</ol>
									<div id="erjidi">
										<ol id="li4">
											<li>本店</li>
											<li>平均发货时间：<span class="num">0.78</span>天
											</li>
										</ol>
										<ol id="li5">
											<li>行业</li>
											<li><span class="num">1.25</span>天</li>
										</ol>
									</div>
									<ol id="li1">
										<li><span class="lia">所在地区：</span>浙江省杭州市</li>
										<li><span class="lia" style="margin-left: -24px;">商品数：</span>18900</li>
										<li><span class="lia" style="margin-left: -24px;">收藏数：</span>26599</li>
										<li><span class="lia" style="margin-left: -24px;">销售量：</span>17178</li>
										<li><span class="lia" style="margin-left: 15px;">创建时间：</span>2014年8月13日</li>
										<li><span class="lia" style="margin-left: -45px;">店铺保证金：</span>已缴纳</li>
										<li><span class="lia" style="margin-left: -42px;">工商执照：</span>
											<img src="img/zhizhao.png" /></li>
									</ol>
								</div>
							</div>
						</a>
					</div>
				</div>
				<div id="seach">
					<input id="ssk" type="text" placeholder="请输入您想要的商品..." />
					<button id="quanzhan">搜全站</button>
					<button id="bendian">搜本店</button>
				</div>
			</div>
			<div id="tbg"></div>
			<div id="m_nav">
				<ul id="mnav1">
					<li class="xqli"><a>首页</a></li>
					<li class="xqli" id="qbxl"><a id="xqqb">全部商品
							<div id="xq_m_xl"></div>
					</a>
						<ul id="qbspxl">
							<li><a href="#">上装</a></li>
							<li><a href="#">下装</a></li>
							<li><a href="#">衬衫/T恤</a></li>
							<li><a href="#">毛衣/针织衫</a></li>
							<li><a href="#">套装系列</a></li>
							<li><a href="#">情侣装系列</a></li>
							<li><a href="#">风衣/小西装</a></li>
							<li><a href="#">棉衣/羽绒服</a></li>
							<li><a href="#">毛呢外套</a></li>
							<li><a href="#">蕾丝/雪纺</a></li>
							<li><a href="#">裙子系列</a></li>
						</ul></li>
				</ul>
			</div>
			<div id="main">
				<div id="zhanshi">
					<div id="tpzs">
						<div class="imgzs">
							<img v-bind:src="pro.pimage" />
						</div>
						<div>
							<img src="img/2-1.jpg" />
						</div>
						<div>
							<img src="img/3-1.jpg" />
						</div>
					</div>
					<div id="mx">
						<a class="imgzs1"><img src="img/1-1.jpg" /></a> <a><img
							src="img/2-1.jpg" /></a> <a><img src="img/3-1.jpg" /></a>
					</div>
				</div>
				<div id="xqjieshao">
					<h1>{{pro.pname}}</h1>
					<div id="xqjiage">
						<div>
							<span class="xqjg" id="jg">价格：</span> <span class="xqjg"
								id="yuanjia">￥{{pro.marketPrice}}</span>
						</div>
						<span class="xqjg">促销价：</span> <span id="dbb">￥{{pro.shopPrice}}</span>
						<span id="pj">评价：</span>56 <span id="ljxl">累计销量：</span>89
					</div>
					<div id="jgkf">
						<span>客服：</span> <img src="img/lianxikefu.gif"
							style="height: 15px; width: 15px;" />联系客服
					</div>
					<div id="xqys">
						<span>颜色：</span> <img src="img/yanse.jpg" style="width: 45px;" />
					</div>
					<div id="xqcm">
						<span>尺码：</span>
						<ol>
							<li id="cms" class="cmbxz">S</li>
							<li>M</li>
							<li>L</li>
						</ol>
					</div>
					<div id="xqsl">
						<span>数量：</span>
						<div id="sljian"></div>
						<input id="xzsl" type="text"  v-model="pro.num"   value="1" />
						<div id="sljia"></div>
					</div>
					<button id="ljgm">立即购买</button> <button  @click="addCar()"  id="jrgwc">加入购物车</button>
					<div id="xqsck">
						<a href="#" id="shoucangd">
							<div id="xqx"></div> <span>{{pro.collect}}</span>
						</a>
					</div>
					<div id="xqfxk">
						<div id="xqf"></div>
						<span>分享</span>
					</div>
					<div id="fwcn">
						<span>服务承诺：</span> <img src="img/tui.png" id="tui" /><span>退货补运费</span>
						<img src="img/you.png" /><span>全国包邮</span> <img
							src="img/qitian.png" /><span>7天无理由退货</span> <img
							src="img/qier.png" /><span>72小时发货</span>
					</div>
					<div id="zffsk">
						<span>支付方式：</span>
						<div id="zffs"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="foot">
		<div id="foot_ys">
			<div id="erweima">
				<h4>美丽说客户端下载</h4>
				<img src="img/kehuduan.png" />
			</div>
			<div id="erweima1">
				<h4>美丽说微信服务号</h4>
				<img src="img/fuwuhao.jpg" />
			</div>
			<table>
				<tr id="title">
					<td>买家帮助</td>
					<td>商家帮助</td>
					<td>关于我们</td>
					<td>关注我们</td>
				</tr>
				<tr>
					<td>新手指南</td>
					<td>供货商招募</td>
					<td>关于美丽说</td>
					<td><div id="xinlang" class="guanzhu"></div>新浪微博</td>
				</tr>
				<tr>
					<td>服务保障</td>
					<td>商家后台</td>
					<td>联系我们</td>
					<td><div id="Qkongjian" class="guanzhu"></div>QQ空间</td>
				</tr>
				<tr>
					<td>常见问题</td>
					<td>规则中心</td>
					<td></td>
					<td><div id="tengxun" class="guanzhu"></div>腾讯微博</td>
				</tr>
				<tr>
					<td>风险监测</td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</div>
		<div id="footer">
			Copyright ©2017 Meilishuo.com <a href="#">电信与信息服务业务经营许可证100798号</a> <a
				href="#">经营性网站备案信息</a> <br /> 京ICP备11031139号 京公网安备110108006045
			客服电话：400-8158-666 文明办网文明上网举报电话：010-82615762 <a href="#">违法不良信息举报中心</a>
		</div>
	</div>
	<script type="text/javascript" src="/meilishuo/js/jq.js"></script>
	<script type="text/javascript" src="/meilishuo/js/vue.js"></script>
	<script type="text/javascript">
		//获取地址栏上面的id
		var id = window.location.href.split("=")[1];

		$.get("/meilishuo/product/get?id=" + id, function(backData) {
			app.pro = backData.data
		});

		var app = new Vue({
			el : "#app",
			data : {
				pro : {}
			},
			methods : {
				addCar:function(){
					
					  $.post("/meilishuo/car/addCar",app.pro ,function(backData){
						  if(backData.code == 10030){ 
							  if(confirm("对不起 您还没有登录 是否去登录？")){
								  window.location.href = "/meilishuo/denglu.html?src="+window.location.href;
							  }
						  }
						  
						  if(backData.code == 10031){
							  if(confirm("恭喜您 添加成功 是否去购物车查看 ")){
								  window.location.href = "/meilishuo/jump/toCar";
							  }
						  }
						  
					  });
					
				}
			}
		});
	</script>
</body>
</html>











